<template>
    <div class="card_base_0786">
        <div class="picdiv107">
            <!-- 本div放头像 -->
            <img class="img_class107" :src="imgpath">
        </div>

        <div class="content107">
            <!-- 姓名及挑战详情 2018.10.7 -->
            <span class="uname107" v-text="UserName"></span><br>
            <span class="alertmsg107">挑战题数：{{FNum}}，答错：{{AnsWrong}}，再接再厉！</span>
        </div>

        <div>
            <!-- 答错列表以及正确答案  2018.10.7 -->
            <van-collapse   v-model="activeName" accordion>
                <van-collapse-item   class="itemclass107" v-for="(item,index) in WrongQuestionContentList" :key="index" :title="item.QTitle" :name="index" >
                    <img slot="icon" class="iconclass107" src='http://127.0.0.1:8081/wrong.svg'>
                    <span v-text="Content(item.QA,item.QB,item.QC,item.QD,item.Ans)"></span>
                </van-collapse-item>
            </van-collapse>
        </div>
    </div>
</template>

<script>
export default {
    computed:{
        imgpath(){
            return this.$store.state.UserPicPath
        },
        UserName(){
            return this.$store.state.UserName
        }
    },
    data(){
        return {
            AnsWrong:3,
            activeName:0,
        }
    },
    props:['WrongQuestionContentList','FNum'],
    mounted(){
        console.log(this.WrongQuestionContentList)
    },
    methods:{
        Content(QA,QB,QC,QD,Ans){
            if (Ans==String(QA).substr(0,1)) {
                return QA
            }
            if (Ans==String(QB).substr(0,1)) {
                return QB
            }
            if (Ans==String(QC).substr(0,1)) {
                return QC
            }
            if (Ans==String(QD).substr(0,1)) {
                return String(QD).substr(2);
            }
        }
    }
}
</script>

<style scoped>
.card_base_0786{
    /* border: 1px solid white; */
    height: 60vh;
    width: 90vw;
    margin: 3vh 5vw;
    background-color: #fff;
}
.picdiv107{
    height: 8vh;
    position: relative;
    /* border: 1px solid blue; */
    top: -3vh;
}
.img_class107{
    height: 8vh;
    border-radius: 50%;
    margin-left: 5vw;
}
.content107{
    height: 8vh;
    /* border: 1px solid blue; */
    position: relative;
    top: -2vh;
    padding-left: 5vw;
    padding-right: 5vw;
    color: #e3495b;
    
}
.uname107{
    font-size: 20px;
}
.alertmsg107{
    font-size: 13.5px;
}
.itemclass107{
    /* 答案样式 */
}
.iconclass107{
    height:5vh;
    padding-right: 10px;
}
</style>
